<template>
  <div class="app-container">
    <el-table
      v-loading="loadingTableVisible"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      default-expand-all
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :data="list"
      border
      size="mini"
    >
      <el-table-column prop="id" label="编号" width="80"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="path" label="路径"></el-table-column>
      <el-table-column prop="isVisble" label="是否可见"></el-table-column>
      <el-table-column label="操作" align="center" width="140" fixed="right">
        <template slot="header" slot-scope="scope">
          <el-button type="primary" class="list-mini-btn" @click="handleCreate">创建</el-button>
        </template>
        <template slot-scope="{row}">
          <el-button type="primary" class="list-mini-btn" @click="handleUpdate(row)">编辑</el-button>
          <el-button type="danger" class="list-mini-btn" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="dataFrom" :rules="rules" :model="temp" label-width="80px">
        <el-form-item label="上级菜单" prop="parentId">
          <el-select v-model="temp.parentId" filterable placeholder="上级">
            <el-option
              v-for="(item,index) in options"
              :key="parseInt(index)"
              :label="item"
              :value="parseInt(index)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单标题" prop="title">
          <el-input v-model="temp.title"></el-input>
        </el-form-item>
        <el-form-item label="跳转类型" prop="type">
          <el-radio v-model="temp.type" label="self">本页面打开</el-radio>
          <el-radio v-model="temp.type" label="blank">新页面打开</el-radio>
        </el-form-item>
        <el-form-item label="是否可见" prop="isVisble">
          <el-switch v-model="temp.isVisble" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveFormData()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getBlogMenuList,
  getBlogMenuInfo,
  saveBlogMenuInfo,
  deleteBlogMenuInfo,
  getBlogDictionary
} from "@/api/blog/menu";
var model = {
  id: undefined,
  parentId: undefined,
  title: "",
  type: "self",
  isVisble: false
};
export default {
  data() {
    return {
      loadingTableVisible: false,
      dialogFormTitle: "创建菜单",
      dialogFormVisible: false,
      list: [],
      options: [],
      temp: model,
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getMenus();
  },
  methods: {
    getMenus() {
      this.loadingTableVisible = true;
      getBlogMenuList()
        .then(response => {
          this.loadingTableVisible = false;
          this.list = response.data;
        })
        .catch(err => {
          this.loadingTableVisible = false;
        });
    },
    getOptions() {
      getBlogDictionary().then(response => {
        this.options = response.data;
      });
    },
    getInfo(id) {
      getBlogMenuInfo(id).then(response => {
        this.temp = response.data;
      });
    },
    handleCreate() {
      this.dialogFormTitle = "创建菜单";
      this.dialogFormVisible = true;
      this.temp = model;
      this.getOptions();
    },
    handleUpdate(row) {
      this.dialogFormTitle = "修改菜单";
      this.dialogFormVisible = true;
      this.getOptions();
      this.getInfo(row.id);
    },
    saveFormData() {
      this.$refs["dataFrom"].validate(valid => {
        if (valid) {
          const loading = this.$loading({ text: "正在保存数据" });
          saveBlogMenuInfo(this.temp)
            .then(response => {
              loading.close();
              this.dialogFormVisible = false;
              this.$message({
                message: response.message,
                type: response.success ? "success" : "error"
              });
              this.getMenus();
            })
            .catch(err => {
              loading.close();
            });
        }
      });
    }
  }
};
</script>